<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 4112686</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            var data;
            $(document).ready(function() {                  	// When the HTML DOM is ready loading, then execute the following function...
				$('#somebutton').click(function() {               // Locate HTML DOM element with ID "somebutton" and assign the following function to its "click" event...
                    $.get('someservlet', function(responseText) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
                       //$('#somediv').text(responseText);         // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
                    	data=responseText;
                    	alert("done");
    				});
                });            
                $('#otherbutton').click(function() {               
					var $table = $('<table>').appendTo($('#somediv')); // Create HTML <table> element and append it to HTML DOM element with ID "somediv".
					$.each(data, function(i, product) {
						var row = $('<tr>').appendTo($table);
						$('<td>').text(i).appendTo(row);
						$('<td>').text(product.id).appendTo(row);
						$('<td>').text(product.name.firstName+" "+product.name.lastName).appendTo(row);
						$('<td>').text(product.price).appendTo(row);
						var tmp="";
						for (var i in product.areas) {
							tmp+=product.areas[i]+" ";
        				}
						$('<td>').text(tmp).appendTo(row);
					});
                });
            });
        </script>
    </head>
    <body>
        <button id="somebutton">load data</button>
        
        <button id="otherbutton">display</button>

        <div id="somediv"></div>
    </body>
</html>